<template>
  <view class="home">
    <view class="home-bg">
      <text>首页</text>
      <image :src="baseImgUrl + 'home-bg.png'" mode=""></image>
    </view>
    <view class="location-info-wrapper" v-if="cityInfo.name">
      <view class="location-info">
        <view class="location-text">
          {{ cityName }}
        </view>
        <u-icon name="arrow-right" color="#000" size="28rpx"></u-icon>
      </view>
    </view>

    <view class="wrapper">
      <!-- 消息资讯 -->
      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 消息资讯 </view>
        </view>
        <view class="list-wrapper" style="padding-top: 20px">
          <view class="item" v-for="(item, index) in list" :key="index" :data-url="item.url" @click="handleClickRouter">
            <!-- <tex class="badgeText" v-if="item.value">{{
                item.value > 99 ? "99+" : item.value
              }}</tex> -->
            <image class="img" :src="item.icon"></image>
            <view class="text">{{ item.text }}</view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 常用功能 </view>
        </view>
        <view class="list-wrapper" style="padding-top: 20px">
          <view class="item funItem" v-for="(item, index) in commonFunctionListPermission" :key="index"
            :data-url="`${item.url}?id=${item.id}&navTitle=${item.informationName}`"
            @click="(e) => handleClickCommonFunction(e, item)">
            <view class="img-wrapper">
              <image class="img-used" :src="item.iconUrl"></image>
              <view class="dot" v-if="item.count">
                <u-badge max="999" :value="item.count"></u-badge>
              </view>
            </view>
            <view class="text">{{ item.informationName }}</view>
          </view>
        </view>
      </view>

      <!-- 信息备案 -->
      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle">
            {{ role == "mini" ? "信息备案" : "信息采集" }}
          </view>
        </view>
        <view class="list-wrapper" style="padding-top: 20px" v-if="role == 'mini'">
          <view class="item funItem" v-for="(item, index) in informationFiling" :key="index"
            :data-url="`${item.url}?navTitle=${item.informationName}`" data-type="navigate" @click="handleClickRouter">
            <image class="img" :src="item.iconUrl"></image>
            <view class="text">{{ item.informationName }}</view>
          </view>
        </view>

        <view class="list-wrapper" style="padding-top: 20px" v-else>
          <view class="item funItem" v-for="(item, index) in adminList" :key="index"
            :data-url="`${item.url}?navTitle=${item.informationName}`" data-type="navigate" @click="handleClickRouter">
            <image class="img" :src="item.iconUrl"></image>
            <view class="text">{{ item.informationName }}</view>
          </view>
        </view>
      </view>

      <!-- 重要提醒 -->
      <view class="wrapper-item" style="margin-bottom: 50px" v-if="role === 'mini'">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 重要提醒 </view>
          <view class="wrapper-unread" data-type="tabBar" data-url="/pages/messages/messages"
            @click="handleClickRouter">
            <block v-if="unreadNum != 0">
              {{ unreadNum }}条未读
              <text></text>
              <u-icon name="arrow-right" color="#BBBBBB" size="13"></u-icon>
            </block>
          </view>
        </view>

        <view class="wrapper-body">
          <view class="list-remind">
            <!-- 注意  这里只能展示5条数据 -->
            <view v-for="v in remind" :key="v.id" class="remind-item" @click="warnHandle(v)">
              <view>
                <image :src="v.iconUrl" mode=""></image>
              </view>
              <view class="remind-data" @click="handleImportantItem(v)">
                <view class="headline">
                  <view class="line-hidden title">
                    {{ v.title }}
                  </view>
                  <view class="tiem">{{ v.createTime }}</view>
                </view>
                <view class="content">{{ v.content }}</view>
              </view>
            </view>
          </view>
          <view v-if="!remind.length">
            <u-empty mode="list" text="暂无重要提醒！" :icon="baseImgUrl + 'no-icon1.png'">
            </u-empty>
          </view>
        </view>
      </view>
    </view>

    <!-- 责任书提醒 -->
    <u-popup :show="personShow && personNum == 0 && stayNum" :round="10" mode="center" :closeOnClickOverlay="false"
      :overlayOpacity="0.5" custom-style="top: -100rpx;width: 702rpx;" @close="close">
      <view class="popupClass">
        <view class="popupImgtitle">
          <image :src="baseImgUrl + 'popupTitle.png'"></image>
        </view>
        <view class="poTitle">提醒</view>

        <view class="popupMatter">
          您有{{ stayNum }}份新的责任书待签署， 请尽快签署！
        </view>
        <view class="btns">
          <button class="reset-btn lt cancelBtn" type="primary" @click="laterHandle">
            稍后签署
          </button>
          <button class="submit-btn" type="primary" @click="nowHandle">
            现在签署
          </button>
        </view>
      </view>
    </u-popup>

    <yy-change-city ref="changeCityRef" :city="cityName" @change="handleCityChange"></yy-change-city>

    <!-- #ifdef MP-WEIXIN -->
    <view class="attention" v-if="token && focusOn">
      <image :src="baseImgUrl + 'close_off.png'" mode="" @click="focusHandle"></image>
      <official-account v-if="token && focusOn"></official-account>
    </view>
    <!-- #endif -->
    <custom-tab-bar :tabBarIndex="0" ref="tabRef" :badge="unreadMessageCount" />
  </view>
</template>

<script>
  import {
    importantReminder,
    importantReminderNotReading,
    findWaitSignCount,
  } from "@/api/home.js";
  import {
    informationTree
  } from "@/api/myself.js";
  import {
    importantReminderDetail
  } from "@/api/messages.js";
  import {
    findEnableDictItemsbyCode,
    findAllDict,
    sumCount,
    getDepartAll,
    taskVerificationCount,
  } from "@/api/api.js";
  import mixin from "@/utils/mixin.js";
  import {
    Toast,
    getLocationInfo,
    handleClickRouter,
    hasToken,
    isLoading,
    navTo,
  } from "@/utils/util.js";

  import {
    config,
    tmplIds
  } from "@/config.js";
  import {
    mapState
  } from "vuex";

  export default {
    mixins: [mixin],
    data() {
      return {
        token: "",
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: "",
        focusOn: false,
        list: [{
            id: 0,
            text: "办事指南",
            value: 0,
            icon: this.$baseImgUrl + "listIcon_1.png",
            url: "/guideInfo/workList/workList",
          },
          {
            id: 1,
            text: "执法规范",
            value: 0,
            icon: this.$baseImgUrl + "listIcon_2.png",
            url: "/guideInfo/lawEnforcement/lawEnforcement",
          },
          {
            id: 2,
            text: "法律法规",
            value: 0,
            icon: this.$baseImgUrl + "listIcon_3.png",
            url: "/guideInfo/lawsAndRegulations/lawsAndRegulations",
          },
          {
            id: 3,
            text: "行业动态",
            value: 0,
            icon: this.$baseImgUrl + "listIcon_4.png",
            url: "/guideInfo/industryDynamic/industryDynamic",
          },
        ],
        // 功能分类 固定的 常用功能
        commonFunctionList: [{
            id: 1,
            informationName: "待办事项",
            value: 0,
            role: ["mini"],
            iconUrl: this.$baseImgUrl + "daiban.png",
            url: "/todoItem/todoItem",
          },
          {
            id: 2,
            informationName: "线索上报",
            value: 0,
            role: ["mini", "fj", "wgy"],
            iconUrl: this.$baseImgUrl + "xiansuo.png",
            url: "/leadReporting/leadReporting/leadReporting",
          },
          {
            id: 3,
            informationName: "隐患上报",
            role: ["mini", "fj", "wgy"],
            value: 0,
            iconUrl: this.$baseImgUrl + "yinhuan.png",
            url: "/riskReporting/riskReporting/riskReporting",
          },
          {
            id: 4,
            informationName: "矛盾纠纷上报",
            role: ["mini", "fj", "wgy"],
            value: 0,
            iconUrl: this.$baseImgUrl + "maodun.png",
            url: "/conflictDisputeReporting/conflictDisputeReporting/conflictDisputeReporting",
          },
          {
            id: 5,
            informationName: "安全宣传",
            role: ["mini", "fj", "wgy"],
            value: 0,
            iconUrl: this.$baseImgUrl + "zhian.png",
            url: "/publicSecurityPropaganda/publicSecurityPropaganda",
          },
          // {
          //   id: 6,
          //   informationName: "业务宣传",
          //   value: 0,
          //   role: 1,
          //   iconUrl: this.$baseImgUrl + "funIcon_6.png",
          //   url: "/stateApp/businessPublicity/businessPublicity",
          // },
          // {
          //   id: 7,
          //   informationName: "活动申报",
          //   role: ["mini"],
          //   value: 0,
          //   iconUrl: this.$baseImgUrl + "funIcon_10.png",
          //   url: "/declarationAct/declarationAct/declarationAct",
          // },
          {
            id: 8,
            informationName: "投诉建议",
            role: ["mini", "fj", "wgy"],
            value: 0,
            iconUrl: this.$baseImgUrl + "funIcon_9.png",
            url: "/comAndadvice/comAndadvice/comAndadvice",
          },
          {
            id: 9,
            informationName: "涉案物品查询",
            role: ["mini"],
            value: 0,
            iconUrl: this.$baseImgUrl + "involved-icon.png",
            url: "/itemRegistration/involvedPhone",
          },
          {
            id: 10,
            informationName: "场所检查",
            role: ["fj"],
            value: 0,
            iconUrl: this.$baseImgUrl + "venue-check-icon.png",
            url: "/venueInspection/venueCheckTask",
          },
          {
            id: 11,
            informationName: "爱心关怀",
            role: ["mini"],
            value: 0,
            iconUrl: this.$baseImgUrl + "heart-1.png",
            url: "/wristWatch/list",
          },
        ],
        adminList: [{
            id: 1,
            informationName: "实有房屋",
            value: 0,
            iconUrl: this.$baseImgUrl + "shiyoufangwu.png",
            url: "/actual_real_estate/real_estate_index",
          },
          {
            id: 2,
            informationName: "实有人口",
            value: 0,
            iconUrl: this.$baseImgUrl + "shiyourenkou.png",
            url: "/actual_person/actual_person_index",
          },
          {
            iconUrl: this.$baseImgUrl + "/rent.png",
            url: "/funSort/house_list",
            informationName: "出租屋",
          },
          {
            iconUrl: this.$baseImgUrl + "/unit.png",
            url: "/actual_enterprises/index",
            informationName: "实有单位",
          },
          {
            iconUrl: this.$baseImgUrl + "/goods-icon.png",
            url: "/multipleRealInformation/index",
            informationName: "“多实”备案",
          },
        ],

        informationFiling: [{
            iconUrl: this.$baseImgUrl + "/house.png",
            url: "/selfInfo/myHouse/myHouse",
            informationName: "我的房屋",
          },
          {
            iconUrl: this.$baseImgUrl + "/rent.png",
            url: "/rentalHousing/rentalHousing",
            informationName: "出租屋",
          },
          {
            iconUrl: this.$baseImgUrl + "/unit.png",
            url: "/selfInfo/myBusiness/myBusiness",
            informationName: "单位场所",
          },
          {
            iconUrl: this.$baseImgUrl + "/goods-icon.png",
            url: "/multipleRealInformation/index",
            informationName: "“多实”备案",
          },
        ],
        personShow: false,
        personNum: 0, // 打开次数
        stayNum: 0,
        role: uni.getStorageSync("role") || "mini",
        remind: [],
        unreadNum: 0,
        userInfo: uni.getStorageSync("user"),
        safeAreaInsets: {},
        locationInfo: {},
        changeCityRef: null,
        safeAreaInsetsTop: 15,
      };
    },
    computed: {
      commonFunctionListPermission() {
        return this.commonFunctionList.filter((item) =>
          item.role.includes(this.role)
        );
      },
      cityName() {
        const cityInfo = this.cityInfo;
        return cityInfo.name;
      },
      ...mapState(["cityInfo", "unreadMessageCount"]),
    },
    onShow() {
      this.initOnshow();
      this.initPageData()
    },
    onLoad() {},
    mounted() {},
    methods: {
      handleCityChange() {
        this.initOnshow();
      },
      handleChangeCity() {
        console.log(this.$refs.changeCityRef);
        this.$refs.changeCityRef.show();
      },
      handleUploadAudio() {
        uni.navigateTo({
          url: "/webView/selectFile",
        });
      },
      handleClickRouter,
      focusHandle() {
        this.focusOn = false;
        uni.setStorageSync("focusOn", this.focusOn);
      },
      laterHandle() {
        this.personShow = false;
        this.personNum = 1;
        uni.setStorageSync("personNum", this.personNum);
        uni.setStorageSync("signingStatus", false);
      },
      nowHandle() {
        uni.navigateTo({
          url: "/selfInfo/liabilityStatement/liabilityStatement",
        });
        this.personNum = 1;
        uni.setStorageSync("personNum", this.personNum);
        uni.setStorageSync("signingStatus", false);
      },
      warnHandle(v) {
        importantReminderDetail({
          id: v.id,
        }).then((res) => {});

        // checkResult：   检查结果 0.未检查   1.合格   2.不合格
        // 7：审核结果   8：检查结果   9：复查结果   10：逾期提醒
        if (v.remindType == 7) {
          // 未通过
          uni.navigateTo({
            url: `/selfInfo/myBusiness/businessDetails?id=${
            v.bizId
          }&homeon=1&isCompanyType=${
            v.isCompanyType + ""
          }&source=importantReminder`,
          });
        } else if (v.remindType == 8) {
          if (v.checkResult == 1) {
            // 合格
            uni.navigateTo({
              url: `/goOverBag/goPass/goPass?taskId=${v.taskId}`,
            });
            return;
          }

          //不合格
          uni.navigateTo({
            url: `/goOverBag/belowtheMark/nonGoover?taskId=${v.taskId}&&reviewFlag=0`,
          });
        } else if (v.remindType == 9) {
          if (v.checkResult == 1) {
            // 合格
            uni.navigateTo({
              url: `/keepArecord/recordPass/recordPass?taskId=${v.taskId}`,
            });
            return;
          }

          //不合格
          uni.navigateTo({
            url: `/keepArecord/nonRecord/nonRecord?taskId=${v.taskId}&&reviewFlag=0`,
          });
        } else if (v.remindType == 10) {
          // checkType 1.检查单 2.复查单
          if (v.checkType == 1) {
            uni.navigateTo({
              url: `/goOverBag/belowtheMark/nonGoover?taskId=${v.taskId}`,
            });
            return;
          }

          uni.navigateTo({
            url: `/keepArecord/nonRecord/nonRecord?taskId=${v.taskId}`,
          });
        }
      },
      getList() {
        findEnableDictItemsbyCode("user_status").then((res) => {
          uni.setStorageSync("paiNew", res.result[0].value == "0" ? false : true); //0  不展示    1展示
        });
        // 查询省市区树形结构
        let departAll = uni.getStorageSync("departAll");
        if (!departAll) {
          getDepartAll().then((res) => {
            if (res.code == 200) {
              uni.setStorageSync(
                "departAll",
                JSON.stringify(res.result[0].children)
              );
            }
          });
        }

        if (["mini"].includes(this.role)) {
          importantReminderNotReading().then((res) => {
            this.unreadNum = res.result.messageNotRead || 0;
          });
          isLoading(true);
          importantReminder({
              pageNo: 1,
              pageSize: 5,
            })
            .then((res) => {
              if (res.code == 200) {
                this.remind = (res.result && res.result.records) || [];
              }
            })
            .finally(() => {
              isLoading(false);
            });
          findWaitSignCount().then((res) => {
            this.stayNum = res.result.waitSignCount || 0;
          });
        }
      },
      initPage() {
        // 并且实名认证过了
        if (config.role === "mini" && this.userInfo.realNameAuthentication == 1) {
          sumCount().then((res) => {
            let info = this.commonFunctionList.find(
              (item) => item.informationName === "待办事项"
            );
            if (info) {
              this.$set(info, "count", res.result.sumCount);
            }
          });
        }
      },
      handleClickCommonFunction(e, item) {
        // 如果点击的是 线索上报则进行提示
        if (item.informationName === "隐患上报") {
          Toast("暂未上线！");
          return;
        }
        if (item.informationName === '爱心关怀' && hasToken()) {
          console.log('hihihi')
          wx.getSetting({
            withSubscriptions: true,
            success(res) {
              const subscriptionsSetting = res.subscriptionsSetting
              // 没有开启，则提示用户开启
              wx.requestSubscribeMessage({
                tmplIds: tmplIds,
                success(res) {
                  //可传给后台保存
                  let values = tmplIds.map(tmplId => res[tmplId])
                  console.log(values)
                  const hasReject = values.findIndex(item => item === 'reject')
                  // 点击了拒绝，给用户进行提示消息
                  if (~hasReject) {
                    Toast('您拒绝了消息推送，将收不到实时关怀消息提醒！')
                    setTimeout(() => {
                      handleClickRouter(e);
                    }, 250)
                  } else {
                    handleClickRouter(e);
                  }
                }
              })
            }
          })
        } else {
          handleClickRouter(e);
        }
      },
      initOnshow() {
        this.token = uni.getStorageSync("X-MINI-TOKEN");
        if (!this.token) return;
        findEnableDictItemsbyCode("static_server").then((res) => {
          let preFix = res.result.find(
            (item) => item.title === "static_server_url"
          ).value;
          this.imgPrefix = preFix;
          uni.setStorageSync("imgPrefix", preFix);
        });

        let stateFocusOn = uni.getStorageSync("focusOn");
        let scene = uni.getStorageSync("scene");
        if (!stateFocusOn.toString().length) {
          if (
            scene == "1011" ||
            scene == "1017" ||
            scene == "1025" ||
            scene == "1047" ||
            scene == "1124" ||
            scene == "1001" ||
            // scene == "1038" || 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
            scene == "1041" ||
            // scene == "1089" ||  当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
            scene == "1090" ||
            scene == "1104" ||
            scene == "1131" ||
            scene == "1187"
          ) {
            stateFocusOn = true;
          }
        }
        this.focusOn = stateFocusOn;
        uni.removeStorageSync("industryList");

        // 总数据字典
        findAllDict().then((res) => {
          let result = res.result
          let {
            nationality,
            certificate_type
          } = result
          nationality = nationality.sort((a, b) => a.sort - b.sort)
          certificate_type = certificate_type.sort((a, b) => a.sort - b.sort)

          uni.setStorageSync("allCode", {
            ...result,
            nationality,
            certificate_type
          });
        });

        if (scene == "1089" && uni.getStorageSync("signingStatus")) {
          uni.removeStorageSync("personNum");
          this.personNum = 0;
        }
        let pnum = uni.getStorageSync("personNum");
        if (pnum) {
          this.personNum = uni.getStorageSync("personNum");
        }
        if (this.personNum == 0) {
          this.personShow = true;
        }
        this.getList();
        this.initPage();
      },
      initPageData() {
        // 如果是辅警才调用
        if (this.role == 'fj') {
          taskVerificationCount()
            .then((res) => {
              // 计算出未读的
              const result = res.result
              let sum = result.jincompleteCount + result.dincompleteCount + result.jexpectCount + result.dexpectCount
              let info = this.commonFunctionList.find(
                (item) => item.informationName === "场所检查"
              );
              if (info) {
                this.$set(info, "count", sum);
              }
            })
        }
      },
      handleImportantItem(item) {
        if ([11, 12, 13].includes(item.remindType)) {
          navTo({
            url: '/wristWatch/messagePrompt',
            params: item
          })
        }
      }
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .home {
    flex: 1;
    background-color: #f3f3f3;
    margin-bottom: 50px;
    position: relative;

    .home-bg {
      width: 100%;
      height: 272rpx;

      text {
        position: absolute;
        top: 60rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .location-info-wrapper {
      position: absolute;
      padding-top: 29rpx;
      padding-left: 21rpx;
      top: calc(var(--status-bar-height) + 10px);

      .location-info {
        padding: 6rpx 16rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        background: #f3f3f3;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        border: 1rpx solid #e5e5e5;
        display: flex;
        align-items: center;

        .location-text {
          margin-left: 13rpx;
          margin-right: 20rpx;
        }
      }
    }

    .home-title {
      position: absolute;
      top: 10rpx;
      left: 6%;
      color: #ffffff;
      font-size: 34rpx;
      font-weight: bold;
    }

    .wrapper {
      position: absolute;
      top: 180rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 50px;
      padding-bottom: 100rpx;

      .wrapper-item {
        margin-bottom: 1vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        // box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
        border-radius: 10rpx;
        width: 702rpx;

        .wrapper-bar {
          display: flex;
          justify-content: space-between;
          height: 40rpx;

          .wrapper-bartitle {
            display: flex;
            font-size: 30rpx;
            font-weight: bold;
          }

          .wrapper-unread {
            display: flex;
            color: #545454;
            font-size: 24rpx;

            text {
              position: relative;
              top: 10rpx;
              display: inline-block;
              border-radius: 50%;
              margin: 0 10rpx;
              margin-bottom: 4rpx;
              width: 12rpx;
              height: 12rpx;
              background: #ff1343;
            }
          }
        }

        .wrapper-body {
          padding-top: 20px;
          padding-bottom: 10px;
        }
      }

      .list-wrapper {
        display: flex;
        font-size: 24rpx;
        flex-wrap: wrap;
        color: #272727;
        bottom: 14.543vh;
        left: 25rpx;

        .item {
          position: relative;
          text-align: center;
          width: 25%;

          /deep/ .u-badge {
            position: absolute;
            right: 0;
            top: -10rpx;
            z-index: 10;
          }

          .badgeText {
            top: -15rpx;
            right: 18rpx;
          }

          .img-wrapper {
            margin: 0 auto 1vh auto;
            width: 88rpx;
            height: 88rpx;
            position: relative;

            .img-used {
              width: 100%;
              height: 100%;
            }

            .dot {
              font-weight: bold;
              font-size: 24rpx;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              right: -14rpx;
              top: -10rpx;
              border-radius: 50%;
            }
          }

          .img {
            margin-bottom: 1vh;
            width: 88rpx;
            height: 88rpx;
          }

          .text {
            color: #343434;
            font-size: 24rpx;
            line-height: 1;
          }
        }

        .funItem:nth-of-type(-n + 8) {
          padding-bottom: 30rpx;
        }
      }

      .list-remind {
        font-size: 26rpx;

        .remind-item {
          display: flex;
          border-bottom: 1px solid #ebecef;
          margin-bottom: 1.3vh;

          image {
            vertical-align: middle;
            margin-right: 10px;
            width: 32rpx;
            height: 32rpx;
          }

          .remind-data {
            flex: 2;
            line-height: 48rpx;

            .headline {
              display: flex;
              justify-content: space-between;

              .title {
                color: #2c2c2c;
                max-width: 310rpx;
              }

              .tiem {
                color: #b9b9b9;
              }
            }

            .content {
              margin-bottom: 0.5vh;
              color: #787878;

              overflow: hidden;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }

    .attention {
      position: fixed;
      bottom: 100rpx;
      z-index: 1000;
      width: 100%;

      image {
        position: absolute;
        right: 0;
        z-index: 1001;
        width: 50rpx;
        height: 50rpx;
      }
    }

    .popupClass {
      position: relative;

      .popupImgtitle {
        position: absolute;
        top: -280rpx;
        width: 100%;
        height: 328rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .poTitle {
        position: absolute;
        top: -30rpx;
        width: 100%;
        font-size: 36rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
      }

      .popupMatter {
        margin-top: 100rpx;
        padding: 0 80rpx 30rpx;
        color: #656565;
        line-height: 50rpx;
        font-size: 36rpx;
        font-weight: 500;
        text-align: center;
      }
    }

    /deep/.u-popup__content {
      .u-safe-bottom {
        padding-bottom: 15rpx;
      }
    }
  }
</style>